<div class="collection">
  <div class="select">
    <section class="demo-section">
      <form dForm ngForm class="form" [labelSize]="'sm'" [layout]="layoutDirection">
        <d-form-item>
          <d-search [isKeyupSearch]="true" name="collectionName" placeholder="请根据藏品分类名称进行搜索"
            [(ngModel)]="queryParams.collectionName" [iconPosition]="'left'" (searchFn)="submitForm($event)"></d-search>
        </d-form-item>
        <d-form-item>
          <d-form-label>状态:</d-form-label>
          <d-form-control>
            <d-select name="collectionStatus" [allowClear]="true" [filterKey]="'name'" [options]="options2"
              [(ngModel)]="currentOption4" [placeholder]="'请选择'" (valueChange)="submitForm($event)"></d-select>
          </d-form-control>
        </d-form-item>
        <span class="buildCollection">
          <d-button id="primaryBtn" (click)="openStandardDialog()">新建藏品集合</d-button>
        </span>
      </form>
    </section>
  </div>
  <div class="main">
    <d-data-table class="table" [tableWidthConfig]="tableWidthConfig" [dataSource]="basicDataSource" [scrollable]="true"
      [rowHoveredHighlight]="false">
      <thead dTableHead>
        <tr dTableRow>
          <th dHeadCell *ngFor="let colOption of dataTableOptions.columns">
            {{ colOption.header }}
          </th>
        </tr>
      </thead>
      <tbody dTableBody>
        <ng-template let-rowItem="rowItem" let-rowindex="rowIndex" let-nestedLayer="nestedLayer"
          let-nestedIndex="nestedIndex">
          <tr dTableRow>
            <td dTableCell [nestedColumn]="true" [nestedColumnIndent]="20" [rowItem]="rowItem"
              [nestedLayer]="nestedLayer" [iconFoldTable]="iconParentClose" [iconUnFoldTable]="iconParentOpen"
              (toggleChildTableEvent)="onChildTableToggle($event, rowItem)"></td>
            <td dTableCell style="display: flex;">
              <img dPopover [popType]="'default'" [content]="customTemplate" [position]="'left'" [trigger]="'hover'"
                [controlled]="true" [appendToBody]="true" [popoverStyle]="{ backgroundColor: 'white', color: 'black' }"
                *ngIf="rowItem['coverUrl']" [src]="rowItem['coverUrl']"
                style="border: none; width: 28px; height: 28px; margin-right: 10px;" />
              <ng-template #customTemplate>
                <img [src]="rowItem['coverUrl']" style="border: none; width: 140px; height: 140px;" />
              </ng-template>
              <span *ngIf="rowItem['subCollectionIndex'] == 0">{{ rowItem["collectionName"] }}</span>
              <span *ngIf="rowItem['subCollectionIndex'] != 0">{{ rowItem["name"] }}</span>
            </td>
            <td dTableCell>{{ rowItem["supplies"] }}</td>
            <td dTableCell>{{ rowItem["counters"] }}</td>
            <td dTableCell>{{ rowItem["saleTime"] }}</td>
            <td dTableCell>{{ rowItem["offShelfTime"] }}</td>
            <td dTableCell>{{ rowItem["price"] }}</td>
            <td dTableCell>{{ rowItem["collectionStatus"] }}</td>
            <td dTableCell>
              <a *ngIf="minting(rowItem['status'], '修改')" style="cursor: pointer" (click)="
                  openDrawer(
                    rowItem['collectionName'],
                    rowItem['collectionIndex'],
                    rowItem['subCollectionIndex'],
                    '修改'
                  )
                ">修改&emsp;</a><span *ngIf="minting(rowItem['status'], '发布')">|&emsp;</span>
              <a *ngIf="minting(rowItem['status'], '发布')" style="cursor: pointer" (click)="
                  openDrawer(
                    rowItem['collectionName'],
                    rowItem['collectionIndex'],
                    rowItem['subCollectionIndex'],
                    '发布'
                  )
                ">发布&emsp;</a>
              <span *ngIf="minting(rowItem['status'], '铸造')">铸造中</span>
              <span *ngIf="minting(rowItem['status'], '销毁')">|&emsp;</span>
              <a *ngIf="minting(rowItem['status'], '销毁')" style="cursor: pointer"
                (click)="openPublishDialog(rowItem['collectionIndex'], rowItem['subCollectionIndex'], '销毁')">
                销毁</a>
              <a *ngIf="minting(rowItem['status'], '取消发布')" style="cursor: pointer"
                (click)="openPublishDialog(rowItem['collectionIndex'], rowItem['subCollectionIndex'], '取消发布')">取消发布</a>
            </td>
          </tr>
        </ng-template>
      </tbody>
      <ng-template #noResultTemplateRef>
        <div style="text-align: center; margin-top: 20px">No Data</div>
      </ng-template>
    </d-data-table>
    <div class="bottom">
      <d-pagination style="position: absolute; right: 0; top: 20px" [total]="total" [(pageSize)]="queryParams.pageSize"
        [(pageIndex)]="queryParams.page" [maxItems]="10" [canViewTotal]="true" [canJumpPage]="true"
        [canChangePageSize]="true" [autoFixPageIndex]="false" (pageIndexChange)="pageIndexChange($event)"
        (pageSizeChange)="pageSizeChange($event)">
      </d-pagination>
    </div>
  </div>
</div>
